<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - AI Chat</title>
    <style>
        /* 基础样式 */
        :root {
            --primary: #4361ee;
            --primary-dark: #3a56d4;
            --secondary: #3f37c9;
            --accent: #4895ef;
            --dark: #1d1e2c;
            --darker: #121420;
            --light: #f8f9fa;
            --gray: #6c757d;
            --light-gray: #a0aec0;
            --success: #4cc9f0;
            --warning: #f72585;
            --card-bg: rgba(255, 255, 255, 0.05);
            --border-radius: 12px;
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, var(--darker), var(--dark));
            color: var(--light);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
        }

        /* 注册卡片 */
        .register-container {
            width: 100%;
            max-width: 450px;
            background: var(--card-bg);
            border-radius: var(--border-radius);
            padding: 2.5rem;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .register-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .register-title {
            color: var(--accent);
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .register-subtitle {
            color: var(--light-gray);
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--light);
        }

        .form-control {
            width: 100%;
            padding: 0.75rem 1rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--border-radius);
            color: var(--light);
            font-size: 1rem;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
        }

        /* 密码强度指示器 */
        .password-strength {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

        .strength-meter {
            height: 100%;
            width: 0;
            background: var(--warning);
            transition: width 0.3s ease;
        }

        /* 错误提示 */
        .errorlist {
            list-style: none;
            color: var(--warning);
            font-size: 0.85rem;
            margin-top: 0.5rem;
        }

        /* 按钮样式 */
        .register-btn {
            width: 100%;
            padding: 0.75rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 1rem;
        }

        .register-btn:hover {
            background: var(--secondary);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }

        /* 登录链接 */
        .login-link {
            text-align: center;
            margin-top: 1.5rem;
            color: var(--light-gray);
        }

        .login-link a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .register-container {
                padding: 1.5rem;
            }

            .register-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-header">
            <h1 class="register-title">创建新账号</h1>
            <p class="register-subtitle">加入AI Chat社区</p>
        </div>

        <form method="POST">
            {% csrf_token %}

            {% for field in form %}
                <div class="form-group">
                    <label>{{ field.label }}</label>
                    {{ field }}
                    {% if field.name == "password1" %}
                        <div class="password-strength">
                            <div class="strength-meter" id="password-strength-meter"></div>
                        </div>
                    {% endif %}
                    {% if field.errors %}
                        <ul class="errorlist">
                            {% for error in field.errors %}
                                <li>{{ error }}</li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </div>
            {% endfor %}

            <button type="submit" class="register-btn">注册</button>
        </form>

        <div class="login-link">
            已有账号？<a href="{% url 'User:login' %}">点击这里登录</a>
        </div>
    </div>

    <script>
        // 密码强度检测
        const passwordInput = document.querySelector('input[name="password1"]');
        const strengthMeter = document.getElementById('password-strength-meter');

        if (passwordInput && strengthMeter) {
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;

                // 长度检查
                if (password.length > 7) strength += 1;
                if (password.length > 11) strength += 1;

                // 复杂度检查
                if (/[A-Z]/.test(password)) strength += 1;
                if (/[0-9]/.test(password)) strength += 1;
                if (/[^A-Za-z0-9]/.test(password)) strength += 1;

                // 更新强度条
                const width = Math.min(100, strength * 25);
                strengthMeter.style.width = width + '%';

                // 更新颜色
                if (width < 40) {
                    strengthMeter.style.backgroundColor = 'var(--warning)';
                } else if (width < 70) {
                    strengthMeter.style.backgroundColor = 'var(--accent)';
                } else {
                    strengthMeter.style.backgroundColor = 'var(--success)';
                }
            });
        }
    </script>
</body>
</html>